<template>
	<view class="w-full" style="color: #636363;">
		<view class="w-full border-b  p-2 box-border flex gap-10 text-sm" style="border-color: #303030;">
			<view :class="{'text-white':active=='盘口'}" class="cursor-pointer" @click="clickTab('盘口')">{{$t('heyue.pankou')}}</view>
			<view :class="{'text-white':active=='实时成交'}" class="cursor-pointer" @click="clickTab('实时成交')">{{$t('heyue.shishichengjiao')}}</view>
		</view>
		<view v-if="active=='盘口'">
			<view class="w-full">
				<view class="flex justify-between items-center w-full pt-0 text-md box-border" style="padding: 10px 15px;">
					<view style="width: 40%;min-width: 140px;">{{$t('bibi.jiage')}}</view>
					<view style="width: 20%;" class="text-right">{{$t('bibi.shuliang')}}</view>
					<view class="text-right" style="width: 40%;">{{$t('heyue.leiji')}}</view>
				</view>
				<view class="flex justify-between items-center w-full text-white box-border text-xs cursor-pointer relative"
				v-for="(item,index) in table.list" :key="index" @click="tableClick(item)" style="padding: 11px 15px;">
					<view class="flex items-center gap-1" style="width: 40%;min-width: 140px;color: #ff231f;">
						{{item.jyd}}
					</view>
					<view class="text-white text-right" style="width: 20%;">{{item.zxj}}</view>
					<view class="text-right text-white" style="width: 40%;">{{item.zdf}}</view>
					<view class="bg-red" :style="{width:item.width}"></view>
				</view>
			</view>
			<view class="w-full">
				<view class="flex w-full p-3 box-border gap-4" style="padding: 10px 15px;background-color: #2e2e2e;">
					<view class="text-white">{{$t('bibi.zuixingjia')}}</view>
					<view class="green">15642.50</view>
				</view>
				<view class="flex justify-between items-center w-full text-white  box-border text-xs cursor-pointer relative"
				v-for="(item,index) in table.list" :key="index" @click="tableClick(item)" style="padding: 11px 15px;">
					<view class="flex items-center gap-1" style="width: 40%;min-width: 140px;color: #53b987;">
						{{item.jyd}}
					</view>
					<view class="text-white text-right" style="width: 20%;">{{item.zxj}}</view>
					<view class="text-right text-white" style="width: 40%;">{{item.zdf}}</view>
					<view class="bg-green" :style="{width:item.width}"></view>
				</view>
			</view>
		</view>
		<view v-if="active=='实时成交'">
			<view class="flex justify-between items-center w-full pt-0 text-md box-border" style="padding: 10px 15px;">
				<view style="width: 40%;min-width: 140px;">{{$t('bibi.shijian')}}</view>
				<view style="width: 20%;" class="text-right">{{$t('bibi.jiage')}}(USDT)</view>
				<view class="text-right" style="width: 40%;">{{$t('heyue.shuliangzhang')}}</view>
			</view>
			<view class="flex justify-between items-center w-full text-white box-border text-md cursor-pointer relative"
			v-for="(item,index) in shishicj" :key="index" @click="tableClick(item)" style="padding: 2px 15px;">
				<view class="flex items-center gap-1" style="width: 40%;min-width: 140px;">
					{{item.sj}}
				</view>
				<view class="text-white text-right green" style="width: 20%;">{{item.sl}}</view>
				<view class="text-right " style="width: 40%;">{{item.zhang}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { CaretBottom } from '@element-plus/icons-vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				active:'盘口',
				table:{
					list:[
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'1',width:'10%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'2',width:'0%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'3',width:'0%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'4',width:'0%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'5',width:'20%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'6',width:'10%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'6',width:'10%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'6',width:'10%'},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'-10%',id:'6',width:'10%'},
					]
				},
				shishicj:[
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
					{sj:'04:20:58 AM',sl:'101245',zhang:'1.56',id:'1'},
				]
			}
		},
		components:{
			CaretBottom
		},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		methods: {
			clickTab(name){
				this.active = name
			},
			// 点击表格
			tableClick(row){
				this.table.activeId = row.id
			}

		}
	}
</script>

<style scoped lang="scss">
	.bg-red{
		position: absolute;right: 0;top: 0;height: 100%;background-color: rgba(255, 0, 0, 0.1);
	}
	.bg-green{
		position: absolute;right: 0;top: 0;height: 100%;background-color: rgba(83, 185, 135, 0.1);
	}
</style>